<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>英雄百科</title>
  </head>

  <body>
    <div class="main">
      <img class="cover" src="https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_f6416138ae858f73e2ca40a11587e17f/0" />
      <div class="hero-container">
        <input type="text" class="search" placeholder="检索" />
        <ul class="list">
          <li>
            <img src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png" alt="" />
            <p>安妮</p>
          </li>
        </ul>
      </div>
    </div>
    <div id="infoModal" class="modal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
        
          <div class="modal-body">
            <div class="info">
              <img src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png" class="icon img-thumbnail" alt="..." />
              <div class="progress-box">
                <div class="progress">
                  <div class="attack progress-bar bg-success" style="width: 25%">攻击:</div>
                </div>
                <div class="progress">
                  <div class="defense progress-bar bg-info" role="progressbar" style="width: 50%">防御:</div>
                </div>
                <div class="progress">
                  <div class="magic progress-bar bg-warning" role="progressbar" style="width: 75%">魔法:</div>
                </div>
                <div class="progress">
                  <div class="difficulty progress-bar bg-danger" role="progressbar" style="width: 100%">难度:</div>
                </div>
              </div>
            </div>
            <p>
              拥有危险夺命的能力，却长着一幅小大人儿的可爱模样，这就是掌握深不可测占火魔法的女孩——安妮。安妮生活在诺克萨斯北边的山脚下，但即便是在这种地方，她也依然是魔法师中的异类。她与火焰的紧密关系与生俱来——最初那些火焰是伴随着喜怒无常的冲动情绪出现的，后来她学会了如何掌握这些“好玩的小把戏”。其中，安妮最喜欢的就是她召唤亲爱的泰迪熊提伯斯——那头狂野的守护火兽。如今安妮已经迷失在了永恒的天真里，她在黑暗森林中游荡，寻觅着能陪自己玩耍的人。
            </p>
          </div> -->


        </div>
      </div>
    </div>
  </body>
  <script src="./lib/axios.js"></script>
  <script src="./lib/bootstrap.min.js"></script>
  <script>
    const list= document.querySelector('.list');
    const search= document.querySelector('.search');
    const modal=new bootstrap.Modal( document.querySelector('.modal'))
    console.log(search);
   
    function render(){  
      axios({
        url:'https://autumnfish.cn/api/lol/search',   
      }).then(res=>{
        const {data}=res
        list.innerHTML= data.data.map(item=>{
          const {heroId:id,icon,title}=item
          return ` <li data-id=${id}>
            <img src="" alt="" />
            <p>${title}</p>
          </li>`
        }).join('')
      })
    }
    render()
    search.addEventListener('focus',function(){
      const q= search.value
   
      axios.get('https://autumnfish.cn/api/lol/search',{params:{q}}).then(res=>{
        const {data}=res
        list.innerHTML= data.data.map(item=>{
          const {heroId:id,icon,title}=item
          return ` <li data-id=${id}>
            <img src="" alt="" />
            <p>${title}</p>
          </li>`
        }).join('')
       
      })
    })
    search.addEventListener('blur',function(){
      const q= search.value
      if(q==='')return alert('内容位不能为空')
      axios.get('https://autumnfish.cn/api/lol/search',{params:{q}}).then(res=>{
        const {data}=res
        list.innerHTML= data.data.map(item=>{
          const {heroId:id,icon,title}=item
          return ` <li data-id=${id}>
            <img src="" alt="" />
            <p>${title}</p>
          </li>`
        }).join('')
       
      })
    })
    list.addEventListener('click',function(e){
      if(e.target.parentNode.tagName==='LI'){
        const id= e.target.parentNode.dataset.id
        axios.get('https://autumnfish.cn/api/lol/info',{params:{id}}).then(res=>{
          const{data:{data}}=res
          console.log(data);
          console.log(data.hero.title);

          // document.querySelector('.modal-title').innerHTML=`${data.hero.name}${data.hero.title}`
          // document.querySelector('.modal-body').innerHTML=``
           document.querySelector('.modal-dialog').innerHTML=`<div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">${data.hero.name}${data.hero.title}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
        
          <div class="modal-body">
            <div class="info">
              <img src="" class="icon img-thumbnail" alt="..." />
              <div class="progress-box">
                <div class="progress">
                  <div class="attack progress-bar bg-success" style="width: ${data.hero.attack*10}%">攻击:</div>
                </div>
                <div class="progress">
                  <div class="defense progress-bar bg-info" role="progressbar" style="width: ${data.hero.defense*10}%">防御:</div>
                </div>
                <div class="progress">
                  <div class="magic progress-bar bg-warning" role="progressbar" style="width: ${data.hero.magic*10}%">魔法:</div>
                </div>
                <div class="progress">
                  <div class="difficulty progress-bar bg-danger" role="progressbar" style="width: ${data.hero.difficulty*10}%">难度:</div>
                </div>
              </div>
            </div>
            <p>
              ${data.hero.shortBio}
            </p>
          </div>
`
          //  data.map(item=>{
          //   console.log(item);
          //   const {hero,skins,spells}=item
          //   return ` <div class="modal-header">
          //   <h5 class="modal-title">黑暗之女安妮</h5>
          //   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          // </div>
        
          // <div class="modal-body">
          //   <div class="info">
          //     <img src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png" class="icon img-thumbnail" alt="..." />
          //     <div class="progress-box">
          //       <div class="progress">
          //         <div class="attack progress-bar bg-success" style="width: 25%">攻击:</div>
          //       </div>
          //       <div class="progress">
          //         <div class="defense progress-bar bg-info" role="progressbar" style="width: 50%">防御:</div>
          //       </div>
          //       <div class="progress">
          //         <div class="magic progress-bar bg-warning" role="progressbar" style="width: 75%">魔法:</div>
          //       </div>
          //       <div class="progress">
          //         <div class="difficulty progress-bar bg-danger" role="progressbar" style="width: 100%">难度:</div>
          //       </div>
          //     </div>
          //   </div>
          //   <p>
          //     拥有危险夺命的能力，却长着一幅小大人儿的可爱模样，这就是掌握深不可测占火魔法的女孩——安妮。安妮生活在诺克萨斯北边的山脚下，但即便是在这种地方，她也依然是魔法师中的异类。她与火焰的紧密关系与生俱来——最初那些火焰是伴随着喜怒无常的冲动情绪出现的，后来她学会了如何掌握这些“好玩的小把戏”。其中，安妮最喜欢的就是她召唤亲爱的泰迪熊提伯斯——那头狂野的守护火兽。如今安妮已经迷失在了永恒的天真里，她在黑暗森林中游荡，寻觅着能陪自己玩耍的人。
          //   </p>
          // </div>`

          // })
          modal.show()
        })
      }
     

    })
  </script>
</html>
